<template>
  <div style="padding: 20px">
    <el-card>
      <el-row type="flex" justify="space-between" align="center">
        <el-col>
          <el-form :model="formInline" :inline="true">
            <el-form-item>
              <el-input v-model="formInline.subject_name" placeholder="学科名称" name="subject" />
            </el-form-item>
            <el-form-item>
              <el-select v-model="is_show" placeholder="活动区域">
                <el-option label="显示" :value="1" />
                <el-option label="隐藏" :value="2" />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" plain @click="addsubjectitem">搜索</el-button>
              <el-button @click="reset">重置</el-button>
            </el-form-item>
          </el-form>
        </el-col>
        <el-col>
          <el-row type="flex" justify="end">
            <el-button size="medium" type="primary" plain @click="addDialog">创建学科</el-button>
          </el-row>
        </el-col>
      </el-row>
      <el-table
        :data="list"
        border
        :cell-style="{'text-align':'center'}"
        :header-cell-style="{'text-align':'center',background:'#fafafa',color: '#646464'}"
      >
        <el-table-column type="index" label="序号" width="120px" />
        <el-table-column label="学科ID" prop="id" width="70px" />
        <el-table-column label="学科名称" prop="subject_name" />
        <el-table-column label="学科图标" prop="subject_name">
          <template slot-scope="{row}">
            <img :src="`http://122.51.249.55:7005/${row.subject_icon}`" alt>
          </template>
        </el-table-column>
        <el-table-column label="创建人">
          <template>{{ 'learnAdmin' }}</template>
        </el-table-column>
        <el-table-column label="是否显示">
          <template slot-scope="{row}">
            <!-- {{row}} -->
            <el-switch
              v-model="row.is_show"
              :active-value="1"
              :inactive-value="2"
              @change="toggleButton(row.is_show,row.id)"
            />
          </template>
        </el-table-column>
        <el-table-column label="目录数量">
          <template slot-scope="{ row }" style="color: red">
            <span
              :class="{'el-link--primary':row.cate_num }"
              @click="$router.push({
                path:'/subject/directory?subject_id?'+row.id,
                query:row.id
              })"
            >
              {{ row.cate_num }}
              <i v-if="row.cate_num" class="el-icon-paperclip" />
            </span>
          </template>
        </el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{row}">
            <el-button type="primary" icon="el-icon-edit" circle @click="edititem(row.id)" />
            <el-button type="danger" icon="el-icon-delete" circle @click="delitem(row.id)" />
          </template>
        </el-table-column>
      </el-table>
      <el-row type="flex" justify="end" style="height: 100px" align="middle">
        <el-pagination
          background
          :current-page="formInline.page"
          :page-sizes="[2, 4, 6, 8,10]"
          :page-size="formInline.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </el-row>
      <!-- 弹出层 -->
      <Dialog :id="id" ref="Dialog" @notice="getsubjectitem" />
    </el-card>
  </div>
</template>

<script>
import {
  subjectInformationData,
  getsubjectitem,
  toggleButton,
  delsubject
} from '@/api/subject'
import Dialog from './components/dialog'
export default {
  name: 'Subject',
  components: {
    Dialog
  },
  data() {
    return {
      formInline: {
        //搜索框数据
        page: 1,//当前页
        limit: 2//每页多少条
        // 搜索框数据
      },
      list: [], // 表格数据
      total: 0, // 总条数
      subject_name: '',
      is_show: null, // 显示隐藏的is_show
      id: null
    }
  },
  created() {
    this.getsubjectitem()
  },
  methods: {
    // 获取表格数据
    async getsubjectitem() {
      try {
        const { data } = await getsubjectitem(this.formInline)
        console.log(data)
        this.list = data.list
        this.total = data.total
      } catch (err) {
        console.log(err)
      }
    },
    handleSizeChange(val) {
      this.formInline.limit = val
      this.getsubjectitem()
    },
    handleCurrentChange(val) {
      this.formInline.page = val
      this.getsubjectitem()
    },
    // 搜索功能
    async addsubjectitem() {
      const { data } = await getsubjectitem({
        ...this.formInline,
        subject_name: this.subject_name,
        is_show: this.is_show
      })
      console.log(data)
      this.list = data.list
      this.$message.success('查询成功')
    },
    // 重置表单
    reset() {
      this.subject_name = ''
      this.is_show = null
      this.getsubjectitem()
      this.$message.success('取消')
    },
    // 切换状态按钮
    async toggleButton(is_show, id) {
      await toggleButton({
        id: id,
        is_show: is_show
      })
      this.$message.success('切换成功')
    },
    // 删除
    async delitem(id) {
      await this.$confirm('确认删除么？')
      await delsubject(id)
      this.getsubjectitem()
      this.$message.success('删除成功')
    },
    addDialog() {
      this.$refs.Dialog.dialogVisible = true
    },
    edititem(id) {
      // dom更新完成再渲染
      this.$nextTick(function() {
        setTimeout(() => {
          this.$refs.Dialog.dialogVisible = true
        }, 400)
      })
      this.$refs.Dialog.editsubject(id)
      this.id = id
    }
  }
}
</script>

<style scoped lang="scss">
::v-deep .el-input--small .el-input__inner {
  width: 215px;
  padding-right: 30px;
}
::v-deep .el-table__body {
  padding: 0 !important;
  height: 30px;
  line-height: 30px !important;
}
::v-deep .el-table tr {
  height: 72px;
}
::v-deep [data-v-40add2e2] .el-table tr {
  height: 48px;
}
::v-deep .el-link--primary {
  position: relative;
  color: #66b1ff;
  cursor: pointer;
}
// ::v-deep .el-link--primary::after {
//   content: '';
//   position: absolute;
//   top: 15px;
//   left: 0px;
//   height: 1px;
//   width: 30px;
//   background-color: #66b1ff;
// }
::v-deep .el-link--primary:hover::after {
  content: "";
  position: absolute;
  top: 15px;
  left: 0px;
  height: 1px;
  width: 30px;
  background-color: #66b1ff;
}
::v-deep [data-v-40add2e2] .el-input--small .el-input__inner {
  width: 49px;
  padding-right: 10px;
}
::v-deep .el-input--small .el-input__inner {
  width: 215px;
  padding-right: 30px;
}
img {
  width: 80px;
  height: 80px;
}
</style>

